import React, { Component } from 'react'
import { Descriptions, Button, Tabs, Carousel, Spin, Image } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'
import Order from '@/Public/Order'
import { history } from '@/index'
import { userOrderConfig } from '@/Public/Order/orderConfigs'
import { managerGetOrderThunk, queryUserAndAllStuInfoThunk } from './ActionCreators'
import './index.css'

const { TabPane } = Tabs;

const mapStateToProps = (state) => ({
  selectedData: state.baseTable.selectedData
})

const mapDispatchToProps = (dispatch) => ({
  queryUserAndAllStuInfo: (...rest) => dispatch(queryUserAndAllStuInfoThunk(...rest)),
  managerGetOrder: (...rest) => dispatch(managerGetOrderThunk(...rest))
})
@connect(mapStateToProps, mapDispatchToProps)
class UserDetails extends Component {

  state = {
    orderData: {}, // 所有订单信息
    parentInfo: {},
    studentInfoList: [],
    loading1: true,
    loading2: true,
    statusValue: "1"
  }

  componentDidMount() {
    const { selectedData, queryUserAndAllStuInfo, managerGetOrder } = this.props
    if (!selectedData) {
      history.push('/homePage/userManagement/users')
    } else {
      queryUserAndAllStuInfo(selectedData.parentId).then(res => {
        this.setState({
          parentInfo: res.data.data.userInfoVo,
          studentInfoList: res.data.data.studentBoList
        }, () => {
          this.setState({
            loading1: false
          })
        })
      })
      managerGetOrder({ page: '1', size: '5', userId: String(selectedData.parentId) }).then(res => {
        this.setState({
          orderList: res.data.data.list,
          totalCount: res.data.data.totalCount
        }, () => {
          this.setState({
            loading2: false
          })
        })
      })
    }
  }

  changeUserDetails = (index) => {
    const { studentInfoList } = this.state
    const { managerGetOrder } = this.props
    this.setState({
      loading2: true
    }, () => {
      managerGetOrder({ page: '1', size: '5', userId: String(studentInfoList[index].id) }).then(res => {
        this.setState({
          orderList: res.data.data.list,
          totalCount: res.data.data.totalCount
        }, () => {
          this.setState({
            loading2: false
          })
        })
      })
    })
  }

  changePage = (data) => {
    const { managerGetOrder, selectedData } = this.props
    data.userId = String(selectedData.parentId)
    this.setState({
      loading2: true
    }, () => {
      managerGetOrder(data).then(res => {
        this.setState({
          orderList: res.data.data.list,
          totalCount: res.data.data.totalCount
        }, () => {
          this.setState({
            loading2: false
          })
        })
      })
    })
  }

  contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
  };

  render() {
    const { parentInfo, studentInfoList, orderList } = this.state
    return (
      <div className="user-details">
        <ArrowLeftOutlined
          style={{
            fontSize: '20px',
            height: '40px',
            fontWeight: 'bold',
            cursor: 'pointer'
          }}
          onClick={() => {
            history.push('/homePage/userManagement/users')
          }}
        />
        <h3 className="user-details-title">用户信息</h3>
        <div className="user-details-content">
          <h3 style={{ position: 'absolute', fontWeight: 'bold' }}>基础信息</h3>
          <Button type="primary">编辑</Button>
          <Button type="primary">删除</Button>
          {/* 用户基础信息 */}
          <div className="user-information">
            <Tabs defaultActiveKey="1" className="user-tabs">
              <TabPane tab="家长信息" key="1">
                <div style={{ position: 'relative',textAlign:'center' }}>
                  <Image width={150} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" className="user-img"></Image>
                  <Spin
                    tip="Loading..."
                    spinning={this.state.loading1}
                  >
                    <Descriptions
                      column={2}
                      style={{
                        // position: 'relative',
                        // left: '500px',
                        transform: 'translate(0,-100%)'
                      }}
                      size={'small'}
                      labelStyle={{
                        width: '80px',
                        textAlign: 'center',
                      }}
                    >
                      <Descriptions.Item label="姓名">{parentInfo.name}</Descriptions.Item>
                      <Descriptions.Item label="性别">{parentInfo.gender === 0 ? '男' : '女'}</Descriptions.Item>
                      <Descriptions.Item label="地址">{parentInfo.district}</Descriptions.Item>
                      <Descriptions.Item label="联系方式">{parentInfo.telephone}</Descriptions.Item>
                    </Descriptions>
                  </Spin>
                </div>
              </TabPane>
              <TabPane tab="孩子信息" key="2">
                <Carousel effect="fade">
                  {
                    studentInfoList.map(item => {
                      return (
                        <div key={item}>
                          <h3 style={this.contentStyle}>
                            <Descriptions
                              column={2}
                              size={'small'}
                              labelStyle={{
                                width: '100px',
                                textAlign: 'center',
                              }}
                            >
                              <Descriptions.Item label="姓名">{item.name}</Descriptions.Item>
                              <Descriptions.Item label="性别">{item.gender === 1 ? '男' : '女'}</Descriptions.Item>
                              <Descriptions.Item label="年龄">{item.age}</Descriptions.Item>
                              <Descriptions.Item label="学校">{item.school}</Descriptions.Item>
                              <Descriptions.Item label="年级">{item.grade}</Descriptions.Item>
                              <Descriptions.Item label="学号">{item.studentNumber}</Descriptions.Item>
                            </Descriptions></h3>
                        </div>
                      )
                    })
                  }
                </Carousel>
              </TabPane>
            </Tabs>
          </div>
          {/* 订单列表 */}
          <div className="order-list">
            <div className="order-list-title">订单列表</div>
            <Spin
              tip="Loading..."
              spinning={this.state.loading2}
            >
              <Order
                orderConfig={userOrderConfig}
                orderData={orderList}
                totalCount={this.state.totalCount}
                changePage={this.changePage}
                statusValue={this.state.statusValue}
              />
            </Spin>
          </div>

        </div>
      </div>
    )
  }
}

export default UserDetails